<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form ref="requestParameters">
          <div class="filter-container">
            <el-button
              class="filter-item"
              size="small"
              style="margin-left: 10px;height: 36px;"
              type="success"
              icon="el-icon-edit"
              @click="addMenus"
            >添加菜单</el-button>
          </div>
        </el-form>
        <!-- 表格 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%;"
          :default-expand-all="true"
          row-key="id"
          lazy
          :tree-props="{children:'childs'}"
        >
          <el-table-column
            prop="title"
            label="标题"
            align="left"
            width="200px"
          >
            <template slot-scope="scope" class="custom-tree-icon">
              <i
                :class="!scope.row.pid ? 'el-icon-folder-opened' :scope.row.is_point? 'el-icon-view':'el-icon-document'"
              />
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column
            prop="code"
            label="权限点代码"
            align="left"
          />
          <el-table-column
            label="操作"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <el-button icon="el-icon-edit" circle type="primary" plain size="medium" @click="editMenus(scope.row.id)" />
              <el-button icon="el-icon-delete" circle type="danger" plain size="medium" @click="deleteMenus(scope.row.id)" />
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <menuAdd
      ref="menuAdd"
      :text="text"
      :page-title="pageTitle"
      :type-status="typeStatus"
      @handleCloseModal="handleCloseModal"
      @newDataes="newDate"
    />
  </div>
</template>

<script>
import menuAdd from '../components/menu-add.vue'
import { list, remove } from '../../api/base/menus'
export default {
  name: 'TreeTableDemo',
  components: { menuAdd },
  data() {
    return {
      loading: false,
      tableData: [],
      text: '',
      pageTitle: '菜单',
      PermissionGroupsList: [],
      typeStatus: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async deleteMenus(id) {
      try {
        await this.$confirm('确认要删除吗？')
        var data = {
          id: id
        }
        await remove(data)
        // this.page.page = Math.ceil((this.page.counts - 1) / this.page.pagesize)
        this.getList()
        this.$message.success('删除成功!')
      } catch (err) {
        console.log(err)
      }
    },
    editMenus(id) {
      this.text = '编辑'
      this.$refs.typeStatus = true
      this.$refs.menuAdd.dialogFormV()
      this.$refs.menuAdd.hanldeEditForm(id)
    },
    addMenus() {
      this.text = '创建'
      this.$refs.menuAdd.handleResetForm()
      this.$refs.menuAdd.dialogFormV()
    },
    async getList(params) {
      this.loading = true
      const { data } = await list(params)
      this.tableData = data
      this.tableData = JSON.parse(JSON.stringify(this.tableData).replace(/points/g, 'childs'))
      this.loading = false
    },
    handleCloseModal() {
      this.$refs.menuAdd.dialogFormH()
    },
    newDate(obj) {
      this.getList(obj)
    }
  }

}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .filter-container{
    text-align: right;
  }
</style>
